import React, {useState, useEffect} from 'react';
import {Form, Button, DatePicker, Modal, Row, Col, message, Input, Table, Tag, Select} from 'antd';
const FormItem = Form.Item;
import moment from 'moment';
import {getPersonRecord} from '../service';
import SelectUserModal from "@/pages/components/SelectUserModal";
import {SearchOutlined} from '@ant-design/icons';
import {contractTempList} from "@/utils/constant";
const { Option } = Select;
const formLayout = {
  labelCol: {span: 7},
};

const colStyle = {
  xl: 8,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
};

const AddRelieveForm = (props) => {
  const {onSubmit, onCancel, loading, visible} = props;
  const [form] = Form.useForm();
  const [userModalVisible, setUserModalVisible] = useState(false);
  const [userInfo, setUserInfo] = useState(null);
  const [contractData, setContractData] = useState([]);

  useEffect(() => {
    if (visible) {
      form.setFieldsValue({modelId: '解除劳动合同协议书'});
    }
  }, [visible]);

  const confirmSelectUser = (info) => {
    setContractData([]);
    if(info[0]){
      setUserInfo(info[0]);
      form.setFieldsValue({name:info[0].name,orgname: info[0].orgname, unitname: info[0].unitname, jobname: info[0].jobname});
      setUserModalVisible(false);
      getPersonRecord(info[0].oid).then(res => {
        setContractData(res ? [res] : []);
      });
    }else{
      message.error('请选择人员!');
    }
  };

  const onFormCancel = () => {
    setUserInfo(null);
    form.resetFields();
    setContractData([]);
    onCancel();
  };

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();
    form.resetFields();
    onSubmit({
      ...fieldsValue,
      oid:userInfo.oid,
      operateType:7,
      contractType:4
    });
  };

  const contractColumns = [
    {title: '合同主体', dataIndex: 'employerCompany', align: 'center'},
    {
      title: '生效日期', dataIndex: 'contractBeginDate', align: 'center',
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : ''
      }
    },
    {
      title: '终止日期', dataIndex: 'contractEndDate', align: 'center',
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : ''
      }
    },
    {
      title: '合同类型', dataIndex: 'beginContractType',align: 'center',
      render: (text) => {
        return contractTempList.find((item) => item.value === parseInt(text))?.label;
      },
    },
    {
      title: '合同状态', dataIndex: 'status',align: 'center',
      render:() => {
        return (<Tag color="green">已生效</Tag>);
      }
    },
  ];

  const renderContent = () => {
    return (
      <>
        <Row gutter={24}>
          <Col {...colStyle}>
            <FormItem name="name" label="姓名" rules={[{required: true, message: '请选择解除合同员工'}]}>
              <Input.Group compact size="large">
                <Input style={{width: '80%', height: '32px', fontSize: '14px', background: '#ffffff'}}
                       placeholder="请选择解除合同员工" value={userInfo ? userInfo.name : ''} disabled={true}/>
                <Button style={{width: '20%'}} icon={<SearchOutlined/>} onClick={() => setUserModalVisible(true)}/>
              </Input.Group>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="orgname" label="所在公司">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="unitname" label="部门">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="jobname" label="岗位">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="modelId" label="签订模板">
              <Input disabled={true}/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="realEndDate" label="合同终止日期" rules={[{required: true, message: '合同终止日期不能为空'}]}>
              <DatePicker className='widthStyle'/>
            </FormItem>
          </Col>
          <Col {...colStyle}>
            <FormItem name="type" label="合同签署类型" rules={[{required: true, message: '新合同签署类型不能为空'}]}>
              <Select placeholder="请选择">
                <Option value={4}>调动签</Option>
                <Option value={5}>变更签</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Button type="primary" onClick={() => handleSubmit()} loading={loading}>提交</Button>
      </>
    )
  };

  return (
    <Modal
      width={'60%'}
      destroyOnClose
      centered
      title='新建解除合同'
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      onClose={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        style={{paddingTop: '24px'}}
      >
        {renderContent()}
      </Form>
      <Table
        style={{marginBottom: 24}}
        title={() => '合同信息'}
        rowKey="id"
        size="small"
        bordered
        pagination={false}
        loading={loading}
        dataSource={contractData}
        columns={contractColumns}
      />
      <SelectUserModal
        selectType={0}
        visible={userModalVisible}
        handleOk={confirmSelectUser}
        handleCancel={() => setUserModalVisible(false)}
      />
    </Modal>
  )
};

export default (AddRelieveForm);
